<template>
	<div>
		<cl-crud @load="onLoad">
			<template #table-column-userSystem="{scope}">
				<el-tag v-if="scope.row.userSystem == 1" type="success">是</el-tag>
				<el-tag type="info" v-else>否</el-tag>
			</template>
			<template #table-column-status="{scope}">
				<el-tag v-if="scope.row.status == 1" type="success">显示</el-tag>
				<el-tag type="info" v-else>隐藏</el-tag>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import platform from '@/mixin/platform';

export default {
	data() {
		return {
			crud: null,
			options: [],
			select: {
				filters: ''
			}
		};
	},
	mixins: [platform],
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.systemMenagement.appList)
				.set('dict', {
					label: {
						add: '添加平台'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 60
						},
						{
							label: 'key',
							prop: 'key',
							align: 'center'
						},
						{
							label: '平台名称 ',
							prop: 'name',
							align: 'center'
						},
						{
							label: '用户体系',
							prop: 'userSystem',
							align: 'center'
						},
						{
							label: '显示/隐藏',
							prop: 'status',
							align: 'center'
						},
						{
							label: '创建时间',
							prop: 'createTime',
							align: 'center'
						}
					],

					op: {
						layout: ['edit']
					}
				})
				.set('upsert', {
					props: {
						labelWidth: '112px',
						center: true,
						width: '400px',
						'custom-class': 'custom-class-dialog-mini'
					},
					items: [
						{
							label: 'key',
							prop: 'key',
							span: 23,
							component: {
								name: 'el-input',
								props: {
									placeholder: '请输入key',
									disabled: true
								}
							},
							rules: {
								required: true,
								message: '请输入key'
							}
						},
						{
							label: '平台名称',
							prop: 'name',
							span: 23,
							component: {
								name: 'el-input',
								attrs: {
									placeholder: '请输入平台名称'
								}
							},
							rules: {
								required: true,
								message: '请输入平台名称'
							}
						},
						{
							prop: 'userSystem',
							label: '用户体系',
							value: 0,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '是',
										value: 1
									},
									{
										label: '否',
										value: 0
									}
								]
							}
						},
						{
							prop: 'status',
							label: '显示/隐藏',
							value: 1,
							component: {
								name: 'el-radio-group',
								options: [
									{
										label: '显示',
										value: 1
									},
									{
										label: '隐藏',
										value: 2
									}
								]
							}
						}
					]
				})
				.on('submit', async (isEdit, data, { next }) => {
					var app;
					next({
						...data,
						app: app
					});
				})
				.on('open', isEdit => {
					if (isEdit) {
						app.setData('upsert.items[prop:key].component.props.disabled', true);
					} else {
						app.setData('upsert.items[prop:key].component.props.disabled', false);
					}
				})
				.set('layout', [
					['refresh-btn', 'add-btn', 'query', 'flex1', 'search-key'],
					['data-table'],
					['flex1', 'pagination']
				])
				.done();

			app.refresh();
		}
	}
};
</script>
